<!-- <!DOCTYPE html> -->
<html lang="en">

<head>
  <meta charset="UTF-8">
  <!-- 使用UTF-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
    content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <!-- 设置移动终端可视区域 -->
  <meta content="telephone=no" name="format-detection">
  <!-- 禁止iPhone等手机自动将数字变成可点击的拨号连接 -->
  <title>966588服务</title>
  <link href="css/style.css" type="text/css" rel="stylesheet" />
  <link href="css/weui.css" type="text/css" rel="stylesheet" />
</head>

<body style="background: #f6f6f6;">
  <div class="index" id="containerVue" v-cloak>
    <div class="headerView">
      <i onclick="closeView()">&lsaquo;</i>
      <h1>"966588"查询系统</h1>
      <div></div>
      <div class="right" @click="choiceView">筛选</div>
    </div>
    <div class="choice_tip" v-if="choice">
      <div class="choice_view">
        <div class="choice">
          <div class="name">统计节点类型</div>
          <div class="text" @click="adjustOpen"><input type="text" readonly v-model="adjustType" style="font-size: .9rem;"/></div>
          <!-- 统计节点类型 -->
          <div class="selectView" v-if="proType">
            <div class="ulView">
              <div class="title">统计节点类型</div>
              <div class="ul" style="height: 8.25rem;">
                <div class="li" v-for="item in adjust" :class="[item.value == param.projectNode?'active':'']" @click="causeSelect(item)">
                  <div>{{item.title}}</div>
                  <img src="./image/select.png" alt="">
                  <img src="./image/selected.png" class="check" alt="">
                </div>
              </div>
              <div class="selectbtn">
                <!-- <div @click="causeBoole = false">取消</div> -->
                <div @click="selectCause" style="color: #2e84db;">确定</div>
              </div>
            </div>
          </div>
        </div>
        <div class="choice">
          <div class="name">日期范围</div>
          <div class="text">
            <input type="text" style="width: 44%;" id="startTime" readonly />
            <span style="float: left;vertical-align: middle;margin: .2rem .5rem;">~</span>
            <input type="text" style="width: 45%;" id="endTime" readonly />
          </div>
        </div>
        <div class="choice_btn">
          <div class="btn_view" @click="choice = false">关闭</div>
          <div class="btn_view choice_btn_active" @click="search()">确定</div>
        </div>
      </div>
    </div>
    <div class="censusList">
      <div class="search-box">
        <select name="department" id="" class="select" v-model="param.deptCode" placeholder="">
          <option value="">全部部门</option>
          <option :value="item.code" v-for="item in departmentList">{{item.name}}</option>
        </select>
      </div>
      <div class="box">
        <div class="list" :class="item.isChecked?'':'listActive'" v-for="(item,index) in statisticsList">
          <div class="title" @click="changeList(item,index)">
            <div>{{item.name}}</div>
            <img src="./image/back.png" alt="" class="arrow">
          </div>
          <div class="content" style="margin-bottom: 0;">
            <div :id="'main'+index" style="width: 14.5rem;height: 15rem;"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- loading 加载 -->
    <div style="opacity: 1;" v-if="loading">
      <div class="weui-mask_transparent"></div>
      <div class="weui-toast">
        <img src="image/load.gif" alt="" style="width: 2rem;margin: 2rem auto .5rem;">
        <p class="weui-toast__content">加载中</p>
      </div>
    </div>
  </div>
  <script src="script/jquery-3.5.js"></script>
  <script src="script/vue.js"></script>
  <script src="script/api.js"></script>
  <script src="script/ajax.js"></script>
  <script src="script/echarts.min.js"></script>
  <script src="script/laydate/laydate.js"></script>
  <!-- <script src="script/iscroll.js"></script> -->
  <!-- <script src="../js/common/mui.min.js"></script> -->
  <!-- <script src="../js/common/openview.js"></script> -->
  <script>
    var mScroll;
    var isRefresh = false;
    var app = new Vue({
      el: '#containerVue',
      data: {
        param: {
          startDate: "",
          endDate: "",
          projectNode: "-1",
          deptCode: ""
        }, // 搜索条件
        choice: false, // 筛选条件
        proType: false,
        adjust: [{
          title: '全部环节',
          value: -1
        },{
          title: '资料准备和外业生产',
          value: 0
        },{
          title: '内业生产',
          value: 1
        },{
          title: '成果质检',
          value: 2
        },{
          title: '领取报告',
          value: 3
        }],
        adjustType: '',
        loading: false,
        statisticsInfo: {},
        statisticsList: [],
        departmentList: [],
      },
      created() {

      },
      mounted() {
        this.getStatistics();
        this.getDepartment();
      },
      watch: {
        'param.deptCode': function (val, oldval) {
          this.getStatistics();
        }
      },
      methods: {
        backView() {
          window.history.go(-1);
        },
        selectCause() {
          this.proType = false;
        },
        causeSelect(e) {
          this.param.projectNode = e.value;
          this.adjustType = e.title;
        },
        adjustOpen() {
          this.proType = true;
        },
        // 筛选功能
        search() {
          document.body.scrollTop = 0;
          this.choice = false;
          this.getStatistics();
        },
        // 日期筛选
        choiceView() {
          this.choice = true;
          setTimeout(function () {
            laydate.render({
              elem: "#startTime", //指定元素
              type: 'date',
              format: 'yyyy-MM-dd',
              trigger: 'click',
              showBottom: false,
              theme: '#0787d5',
              done: function (value, date, endDate) {
                app.param.startDate = value + " 00:00:00";
              }
            });
            laydate.render({
              elem: "#endTime", //指定元素
              type: 'date',
              format: 'yyyy-MM-dd',
              trigger: 'click',
              showBottom: false,
              theme: '#0787d5',
              done: function (value, date, endDate) {
                app.param.endDate = value + " 23:59:59";
              }
            });
          }, 5 * 100);
        },
        changeList(item, i) {
          this.statisticsList.forEach((element, index) => {
            if (index == i) {
              element.isChecked = !element.isChecked
            }
          });
        },
        getEchart(i) {
          var myChart = echarts.init(document.getElementById('main' + i)), names = this.statisticsInfo.deptList, datas = this.statisticsList[i].nodeList;

          // 指定图表的配置项和数据
          var option = {
            backgroundColor: 'rgba(0,0,0,0)',
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            // legend: {
            //   data: ['接入率', '在线率', '完好率'],
            //   align: 'right',
            //   right: 10,
            //   textStyle: {
            //     color: "#fff"
            //   },
            //   itemWidth: 10,
            //   itemHeight: 10,
            //   itemGap: 35
            // },
            grid: {
              top: "5%",
              left: '25%',
              right: '18%',
              bottom: '10%',
              // containLabel: true
            },
            xAxis: [{
              type: 'value',
              axisLabel: {
                formatter: ''
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: "#999",
                  width: 1,
                  type: "solid"
                },
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: "#999",
                }
              }
            }],
            yAxis: [{
              type: 'category',
              data: names,
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#999",
                  width: 1,
                  type: "solid"
                }
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#999",
                }
              },
            }],

            series: [{
              name: '',
              type: 'bar',
              data: datas,
              label: {
                normal: {
                  show: true,
                  position: 'right',
                  color: '#333',
                  formatter: function(params) {
                    return params.value + '个';
                  }
                },
              },
              barWidth: "15", //柱子宽度
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#008cff'
                  }, {
                    offset: 1,
                    color: '#005193'
                  }]),
                  opacity: 1,
                }
              }
            }
              // , {
              //   name: '在线率',
              //   type: 'bar',
              //   data: [50, 70, 60, 61, 75],
              //   barWidth: "20%",
              //   itemStyle: {
              //     normal: {
              //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              //         offset: 0,
              //         color: '#00da9c'
              //       }, {
              //         offset: 1,
              //         color: '#007a55'
              //       }]),
              //       opacity: 1,
              //     }
              //   }
              // }, {
              //   name: '完好率',
              //   type: 'bar',
              //   data: [70, 48, 73, 68, 53],
              //   barWidth: "20%",
              //   // barGap: 1,
              //   itemStyle: {
              //     normal: {
              //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              //         offset: 0,
              //         color: '#c4e300'
              //       }, {
              //         offset: 1,
              //         color: '#728400'
              //       }]),
              //       opacity: 1,
              //     }
              //   }
              // }
            ]
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        },
        // 获取部门列表
        getDepartment() {
          var that = this;
          ajaxHttp({
            url: 'jeecg-boot/sys/sysDepart/queryGhhsDeptList',
            type: 'post',
            data: {},
            beforeSend: function () {
              that.loading = true
            },
            success: function (res) {
              if (res.success) {
                that.departmentList = res.result
              } else {
                $.Jwarning(res.message)
              }
            },
            complete: function () {
              that.loading = false
            },
            error: function (err) {
              console.log(err);
            }
          });
        },
        // 获取统计信息
        getStatistics() {
          var that = this;
          ajaxHttp({
            url: 'jeecg-boot/node/nodeProjectInfo/getCountChart',
            type: 'post',
            data: this.param,
            beforeSend: function () {
              that.loading = true
            },
            success: function (res) {
              // console.log(res);
              if (res.success) {
                that.statisticsInfo = res.result;
                res.result.tabList.unshift({
                  isChecked: true,
                  name: "项目总数",
                  key: "totalNumList",
                  nodeList: res.result.totalNumList
                })
                that.statisticsList = res.result.tabList
                that.statisticsList.forEach((item, index) => {
                  setTimeout(() => {
                    that.getEchart(index);
                  }, 800);
                })
              } else {
                $.Jwarning(res.message)
              }
            },
            complete: function () {
              that.loading = false
            },
            error: function (err) {
              console.log(err);
            }
          });
        },


      }
    })
  </script>
</body>

</html>